<template>
    <div class="wrop flex fdc fg1">
        <h1 class="mb-30">Pages</h1>
        <div class="wrop-content fg1">
            <div>
                <!-- top -->
                <div>
                    <!-- 筛选按钮 -->
                    <div class="table-operations">
                        <a-button @click="tableALL">All ({{ data.length }})</a-button>
                        <a-button @click="tablePublished">Published (3)</a-button>
                        <a-button @click="tableDraft">Draft (2)</a-button>
                        <a-button @click="tableTrash">Trash (2)</a-button>
                    </div>
                    <div class="flex jc-sb">
                        <!-- 下拉框left -->
                        <div class="table-operations flex">
                            <div class="mr-15">
                                <!-- <a-select v-model:value="optionsName"  style="width: 140px" :options="options"
                                @change="handleComboBox"></a-select> 
                            <a-space>-->
                                <a-select 
                                    v-model:value="optionsName.value1" 
                                    style="width: 119px" :options="options"
                                    @change="handleComboBox">
                                </a-select>
                                <a-button class="ml-5" type="primary" ghost>Apply</a-button>
                            </div>
                            <div>
                                <a-select v-model:value="optionsName.value2" style="width: 100px" :options="options2"
                                    @change="handleComboBox">
                                </a-select>
                                <a-button class="ml-5" type="primary" ghost>Filter</a-button>
                            </div>
                        </div>
                        <!-- right -->
                        <div class="flex">
                            <a-input style="height:32px" v-model:value="value" placeholder="" />
                            <a-button class="ml-5" type="primary" ghost>Search Pages</a-button>
                        </div>
                    </div>
                </div>
                <!-- 表格 -->
                <div class="wrop-table">
                    <a-table :row-selection="rowSelection" :columns="columns" :data-source="dataSource"
                        @change="handleChange">
                        <template #bodyCell="{ column, record, text }">
                            <template v-if="column.dataIndex === 'title'">
                                <a>{{ text }}</a>
                            </template>
                            <template v-if="column.dataIndex === 'operation'">
                                <span class="mr-10" v-if="dataSource.length">
                                    <a @click="edit(record.key)">Edit</a>
                                </span>
                                <a-popconfirm v-if="dataSource.length" title="Sure to delete?"
                                    @confirm="onDelete(record.key)">
                                    <a>Delete</a>
                                </a-popconfirm>
                            </template>
                        </template>
                        <!-- 下拉 -->
                        <template #expandedRowRender>
                            <div class="wrop-table-unfold">
                                <p>QUICK EDIT</p>
                                <div class="unfold flex">
                                    <a-form class="flex fdc fg1" :model="formState" :label-col="labelCol"
                                        :wrapper-col="wrapperCol">
                                        <div class="flex fg1">
                                            <div class="unfold-left fg1">
                                                <a-form-item label="Title">
                                                    <a-input v-model:value="formState.title" />
                                                </a-form-item>
                                                <a-form-item label="Slug">
                                                    <a-input v-model:value="formState.slug" />
                                                </a-form-item>
                                                <a-form-item label="Date">
                                                    <a-date-picker show-time placeholder="Select Time" @change="onChangeTime" @ok="onOkTime" />
                                                </a-form-item>
                                                <a-form-item label="Author">
                                                    <a-select ref="select" v-model:value="formState.author" style="width: 120px"
                                                        @focus="focus" @change="handleChange">
                                                        <a-select-option value="Tiny">Tiny</a-select-option>
                                                        <a-select-option value="Test">Test</a-select-option>
                                                    </a-select>
                                                </a-form-item>
                                            </div>
                                            <div class="unfold-right pl-10 fg1">
                                                <a-form-item label="Parent">
                                                    <a-input v-model:value="formState.parent" />
                                                </a-form-item>
                                                <a-form-item label="">
                                                    <a-checkbox  v-model:checked="formState.checked">Allow Comments</a-checkbox>
                                                </a-form-item>
                                                <a-form-item label="Status">
                                                    <a-select ref="select" 
                                                        v-model:value="formState.status" 
                                                        style="width: 120px"
                                                        defaultActiveFirstOption="ture"
                                                        @focus="focus" @change="handleChange">
                                                        <a-select-option value="Published">Published</a-select-option>
                                                        <a-select-option value="Pending Review">Pending Review</a-select-option>
                                                        <a-select-option value="Draft">Draft</a-select-option>
                                                    </a-select>
                                                </a-form-item>
                                            </div>
                                        </div>
                                        <div class="flex jc-sb pr-15">
                                            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                                                <a-button type="primary" ghost>Cancel</a-button>
                                            </a-form-item>
                                            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                                                <a-button type="primary" @click="onSubmit"
                                                    style="margin-left: 10px">Updata</a-button>
                                            </a-form-item>
                                        </div>
                                    </a-form>
                                </div>
                            </div>
                        </template>
                    </a-table>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { cloneDeep } from 'lodash-es';
import { computed, ref, reactive, onMounted } from 'vue';
import { MessageOutlined } from '@ant-design/icons-vue';
onMounted(() => {
    handleComboBox()
})


// 展开
// 时间
const onChangeTime = (value, dateString) => {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
    };
    const onOkTime = value => {
      console.log('onOk: ', value);
    };
// 时间end
// 展开-下拉框
const options1 = ref([{
        value: 'jack',
        label: 'Jack',
    }, {
        value: 'lucy',
        label: 'Lucy',
    }, {
        value: 'disabled',
        label: 'Disabled',
        disabled: true,
    }, {
        value: 'yiminghe',
        label: 'Yiminghe',
    }]);
// 下拉框end
const formState = reactive({
    title: '',
    slug: '',
    resources: 'resources',
    author:'author',
    status:'Published',
    parent:'',
    type: [],
    checked:'true',
    resource: '',
    desc: '',
});
const onSubmit = () => {
    console.log('submit!', toRaw(formState));
};
// 展开end

// 下拉框 
const optionsName = ref({
    value1: 'Bulk Actions',
    value2: 'All dates',
    value3: 'Author',
    value4: 'Status',
})
const options = ref([{
    value: 'Buli Actions',
    label: 'Buli Actions',
}, {
    value: 'Edit',
    label: 'Edit',
}, {
    value: 'Move to Trash',
    label: 'Move to Trash',
}]);
const options2 = ref([{
    value: 'All dates',
    label: 'All dates',
}, {
    value: 'May 2020',
    label: 'May 2020',
}]);
// ComboBox
const handleComboBox = value => {
    console.log(value); // { key: "lucy", label: "Lucy (101)" }
};

// 下拉框 end

// <message-outlined />
// 表格内容
const data = [];
for (let i = 0; i < 9; i++) {
    data.push({
        key: i.toString(),
        title: `Home ${i}`,
        author: 'Tiny',
        postscript: `Note: This is the best selling product category`,
        status: `Published`,
        date: ` ${i}`,
    });
}
// 表格
const filteredInfo = ref();
const sortedInfo = ref();
// 表头
const columns = computed(() => {
    const filtered = filteredInfo.value || {};
    const sorted = sortedInfo.value || {};
    return [{
        title: 'Title',
        dataIndex: 'title',
        key: 'title',
    }, {
        title: 'Author',
        dataIndex: 'author',
        key: 'author',
    }, {
        title: 'Postscript',
        dataIndex: 'postscript',
        key: 'postscript',
    }, {
        title: 'Status',
        dataIndex: 'status',
        key: 'status',
    }, {
        title: 'Date',
        dataIndex: 'date',
        key: 'date',
        sorter: (a, b) => a.date - b.date,
        // sortOrder: sorted.columnKey === 'date' && sorted.order,
        // filteredValue: filtered.date || null, status
    }, {
        title: 'Operation',
        dataIndex: 'operation',
        key: 'operation',
    }
    ];
});
const handleChange = (pagination, filters, sorter) => {
    console.log('Various parameters', pagination, filters, sorter);
    filteredInfo.value = filters;
    sortedInfo.value = sorter;
};
// 筛选表格数据
const tableALL = () => {
    filteredInfo.value = null;
    console.log(filteredInfo.value, 'filteredInfo.value');
};
const tablePublished = () => {
    filteredInfo.value = null;
    sortedInfo.value = null;
    console.log(sortedInfo.value, 'sortedInfo.value');
};
const tableDraft = () => {
    sortedInfo.value = {
        order: 'descend',
        columnKey: 'date',
    };
}
const tableTrash = () => {
    filteredInfo.value = null;
    console.log(filteredInfo.value, 'filteredInfo.value');
};
// 筛选表格数据end

// 表格数据
const dataSource = ref(data)

// 删除方法
const onDelete = key => {
    dataSource.value = dataSource.value.filter(item => item.key !== key);
};
// 编辑
const editableData = reactive({});
const edit = key => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};

const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    // 禁止选中
    // getCheckboxProps: record => ({
    //     disabled: record.title === 'Contact Us',
    //     // Column configuration not to be checked
    //     name: record.title,
    // }),
};
</script>

<style lang="less" scoped>
.wrop {
    background: #f1f1f1;

    &-content {

        .wrop-table {
            overflow: auto;
            height: 650px;
        }
    }
}

// 滚动条
.wrop-table::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

/* 滚动条上的滚动滑块 */
.wrop-table::-webkit-scrollbar-thumb {
    background-color: #cdcecf;
    border-radius: 32px;
}

// 滚动条end

.table-operations {
    margin-bottom: 16px;
}

.table-operations>button {
    margin-right: 8px;
}
</style>